<template>
  <div class="OptionsPage">
    <van-nav-bar
      left-arrow
      title="修改个人信息"
      @click-left="onClickLeft"
      :border="false"
    />

    <van-cell title="更换头像" is-link @click="showPopup0">
      <img id="img" src="@/assets/head.jpg" alt="" />
      <input type="file" hidden ref="file" id="file1" />
    </van-cell>

 

    <van-popup
      v-model:show="show0"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div class="choiceSex">
        <p islink @click="putHead">上传头像</p>

        <!--  -->
        <p @click="delHead">取消</p>
      </div>
    </van-popup>

    <van-cell @click="changeNick" title="昵称" is-link>{{nick}}</van-cell>
      <van-popup
      v-model:show="show01"
      position="bottom"
      :style="{ height: '30%' }"
    >
 <input type="text" v-model="nickInput">
    <van-area 
        @cancel="cancelNick"
        @confirm="getNick"
        v-show="isShow01"
      />
    
    </van-popup>  
 
    <div style="height: 10px"></div>

    <van-cell title="地区" is-link @click="showPopup">{{ area }}</van-cell>
    <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }">
      <van-area
        :area-list="areaList"
        @cancel="cancelArea"
        @confirm="getArea"
        v-show="isShow"
      />
    </van-popup>

    <van-cell title="性别" is-link @click="showPopup1">{{ sex }}</van-cell>
    <van-popup
      v-model:show="show1"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <div class="choiceSex">
        <p @click="menSex">男</p>
        <p @click="womenSex">女</p>
      </div>
    </van-popup>
    <van-cell title="生日" is-link @click="showPopup2">{{ birth }}</van-cell>
    <van-popup
      v-model:show="show2"
      position="bottom"
      :style="{ height: '30%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        @confirm="getDate"
        @cancel="cancelDate"
      />
    </van-popup>
    <van-cell @click="changeSign" title="个性签名" is-link>{{sign}}</van-cell>
      <van-popup
      v-model:show="show02"
      position="bottom"
      :style="{ height: '30%' }"
    >
 <input type="text" v-model="signInput">
    <van-area 
        @cancel="cancelSign"
        @confirm="getSign"
        v-show="isShow02"
      />
    
    </van-popup>  
  
    <div style="height: 10px"></div>
    <van-cell title="绑定手机" is-link> 173****3657 </van-cell>
    <button @click="dian_wo" > 点我 </button>
  </div>
</template>
  <script setup lang="ts">
import { nextTick, onMounted, onUpdated, ref } from "vue";
import { useRouter,useRoute } from "vue-router";
import { areaList } from "@vant/area-data";
const router = useRouter();
const route = useRoute()
const fileList = ref([]);
let file: any = ref(null); //定义文件信息
let nick:any = ref('手工客')
let sign:any = ref('这家伙太懒!什么都没写')
let nickInput = ref('')
let signInput = ref('')
onMounted(() => {
  let img: any = document.getElementById("img");
  let file1: any = document.getElementById("file1");
  // console.log(file1);
  file1.onchange = function () {
    let imgFile = this.files[0];
    img.src = URL.createObjectURL(imgFile);
  };
//  console.log(route.query.nickInput);
 
  // nickInput.value = route.query.nickInput
  // signInput.value = route.query.signInput
});


const isShow = ref(true);
const isShow01 = ref(true);
const isShow02 = ref(true);
let show = ref(false);
let show0 = ref(false);
let show01 = ref(false);
let show02 = ref(false);
let show1 = ref(false);
let show2 = ref(false);
let area = ref("北京市朝阳区");
let sex = ref("男");
let birth = ref("2000-10-20");

const showPopup0 = () => {
  show0.value = true;
};
const showPopup = () => {
  show.value = true;
};
const showPopup1 = () => {
  show1.value = true;
};
const showPopup2 = () => {
  show2.value = true;
};
function cancelNick() {  
  show01.value = false
}
function getNick() {
  show01.value = false
  // console.log(nickInput.value);
  nick.value = nickInput.value
}
function cancelSign() {  
  show02.value = false
}
function getSign() {
  show02.value = false
  // console.log(nickInput.value);
  sign.value = signInput.value
}
const onClickLeft = () => {
  router.push({
    name: "myOptions",
  });
};
function putHead() {
  console.log(file);

  file.value.click();
  show0.value = false;
}
function delHead() {
  show0.value = false;
}
function changeInfo() {
  router.push({
    name: "changeInfo",
  });
}


function getArea(cc: any) {
  console.log(cc);
  area.value = cc[0].name + cc[1].name + cc[2].name;
  show.value = false;
}
function cancelArea() {
  show.value = false;
}
function menSex() {
  sex.value = "男";
  show1.value = false;
}
function womenSex() {
  sex.value = "女";
  show1.value = false;
}
const currentDate = ref(new Date(2020, 10, 20));
function getDate(dd: any) {
  console.log(dd);
  birth.value = timeFormat(dd);
  show2.value = false;
}
function timeFormat(time: any) {
  // 时间格式化 2019-09-08
  let year = time.getFullYear();
  let month = time.getMonth() + 1;
  let day = time.getDate();
  return year + "-" + month + "-" + day;
}

function cancelDate() {
  show2.value = false;
}
function changeNick() {
  show01.value = true
}
function changeSign() {
  show02.value = true
}

function dian_wo(){
  console.log(111);
  console.log(file.value.files);
  
  
}
</script>
  <style scoped>
.OptionsPage {
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.047);
}
img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.van-cell {
  align-items: center;
}
.choiceSex {
  /* width: 100px; */
  height: 100px;
  /* border: 1px solid blue; */
  margin: 0 auto;
  margin-top: 50px;
}
.choiceSex p {
  line-height: 50px;
  border: 1px solid gray;
  text-align: center;
  margin-top: 10px;
  border-radius: 30px;
}
</style>

  <style>
.van-icon-arrow-left:before {
  color: gainsboro;
}
</style>
  